<template>
  <div class="search-box">
    <van-icon class="search-back" name="arrow-left" size="1.125rem" @click="$router.go(-1)"/>
    <div class="search-box">
      <div class="search-content">
        <van-icon class="search-icon" name="search" size="1.125rem" />
        <input class="search-input" v-model="keyWord" @keydown.enter="sendFather" type="text" placeholder="搜索公募/私募直播视频">
      </div>
      <van-icon v-show="keyWord!==''" class="search-delete" name="close" size="1.125rem" @click="clearkeyWord" />
    </div>
    <div class="search-cancel" @click="$router.go(-1)">取消</div>
  </div>
</template>

<script>
export default {
  props: {
    searchWord: {
      type:String
    }
  },
  data() {
    return {
      keyWord: this.searchWord,
      showDel:false
    }
  },
  methods: {
    //点击叉叉删除搜索词
    clearkeyWord(){
      this.keyWord = ''
      this.$parent._data.searchWord = this.keyWord
    },
    //输入框一改变就传给父组件
    sendFather() {
      this.$parent._data.searchWord = this.keyWord
      this.sensorsTrack(this.keyWord)
    },
    //防抖
    debounce(func, wait) {
      let timeout = null
      function dbFn() {
        let context = this
        clearTimeout(timeout)
        timeout = setTimeout(function () {
          func.apply(context)
        }, wait)
      }
      return dbFn
    },
    //搜索打点
    sensorsTrack(keyword) {
      $sensorsTrack('financing_videoZoneToSearch', {
        search_keyword: keyword
      });
    }
  },
  watch: {
    keyWord() {
      this.debounce(this.sendFather,1000)()
    },
    searchWord(newValue) {
      this.keyWord = newValue
    }
  }
}
</script>

<style scoped lang="less">
.search-box {
  width: 100%;
  height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  .search-back {
    margin-left: 28px;
  }

  .search-box {
    position: static;
    width: 564px;
    height: 60px;
    border: 1px solid #FF5A00;
    border-radius: 50px;
    color: #9AA2B3;
    .search-content {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      .search-icon {
        padding-right: 20px;
      }

      .search-input {
        width: 400px;
        font-size: 26px;
        caret-color: #FF3D00;
        caret-shape: 10px;
      }
    }

    .search-delete {
      margin-right: 25px;
    }

    input::-webkit-input-placeholder {
      color: #9AA2B3;
    }

    input:-moz-placeholder {
      color: #9AA2B3;
    }

    input::-moz-placeholder {
      color: #9AA2B3;
    }

    input:-ms-input-placeholder {
      color: #9AA2B3;
    }
  }

  .search-cancel {
    width: 80px;
    color: #FF5A00;
    font-size: 30px;
  }
}</style>